<template>
  <div class="md:flex wrap">
    <template v-for="(item, index) in data.options" :key="index">
      <!-- <Card
        size="small"
        :loading="loading"
        :title="item.title"
        class="md:w-1/4 w-full !md:mt-0 !mt-4"
        :class="[index + 1 < 4 && '!md:mr-4']"
        :canExpan="false"
      >
        <template #extra>
          <Tag :color="item.color">{{ item.action }}</Tag>
        </template>

        <div class="py-4 px-4 flex justify-between">
          <CountTo prefix="$" :startVal="1" :endVal="item.value" class="text-2xl" />
          <Icon :icon="item.icon" :size="40" />
        </div>

        <div class="p-2 px-4 flex justify-between">
          <span>总{{ item.title }}</span>
          <CountTo prefix="$" :startVal="1" :endVal="item.total" />
        </div>
      </Card> -->
      <div class="card md:w-1/4">
        <img :src="item.src" alt="" />
        <div>
          <div class="value">{{ item.value }}</div>
          <div class="name">{{ item.title }}</div>
        </div>
      </div>
    </template>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, toRefs } from 'vue';
import { dashboardTop } from '@/api/firstPage';
import { CountTo } from '/@/components/CountTo/index';
import { Icon } from '/@/components/Icon';
import { Tag, Card } from 'ant-design-vue';
import { object } from 'vue-types';
// import { growCardList } from '../data';

let data = reactive({
  options: [
    {
      title: '场站数量（个）',
      value: 5000,
      label: 'stationNum',
      src: new URL('../../../../assets/images/firstPage/icon0.png', import.meta.url).href,
    },
    {
      title: '设备数量（个）',
      value: 5000,
      label: 'equipmentNum',
      src: new URL('../../../../assets/images/firstPage/icon1.png', import.meta.url).href,
    },
    {
      title: '插座数量（个）',
      value: 5000,
      label: 'connectorNum',
      src: new URL('../../../../assets/images/firstPage/icon2.png', import.meta.url).href,
    },
    {
      title: '在线/离线数量（个）',
      value: 5000,
      label: 'onlineNum',
      src: new URL('../../../../assets/images/firstPage/icon3.png', import.meta.url).href,
    },
    {
      title: '充电次数（次）',
      value: 5000,
      label: 'eleTimes',
      src: new URL('../../../../assets/images/firstPage/icon4.png', import.meta.url).href,
    },
    {
      title: '充电电量（kw·h）',
      value: 5000,
      label: 'eleTower',
      src: new URL('../../../../assets/images/firstPage/icon5.png', import.meta.url).href,
    },
    {
      title: '充电金额（元）',
      value: 5000,
      label: 'elePrice',
      src: new URL('../../../../assets/images/firstPage/icon6.png', import.meta.url).href,
    },
    {
      title: '充电时长（小时）',
      value: 5000,
      label: 'eleTime',
      src: new URL('../../../../assets/images/firstPage/icon7.png', import.meta.url).href,
    },
  ],
});

//运营概况
dashboardTop({}).then((res) => {
  console.log(res);
  var arr = Object.keys(res);
  arr.map((m, n) => {
    data.options.map((item, index) => {
        if(item.label == m){
            item.value = res[m]
        }
    });
  });
});

defineProps({
  loading: {
    type: Boolean,
  },
});
</script>
<style lang="less" scoped>
.wrap {
  flex-wrap: wrap;
  .card {
    width: calc((100% - 60px) / 4);
    background-size: 100% 100%;
    margin-right: 20px;
    margin-bottom: 20px;
    padding: 30px;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
    color: #6f6f6f;
    > img {
      width: 52px;
      margin-right: 24px;
    }
    .value {
      font-family: 'D-DIN-DIN-Bold';
      font-weight: bold;
      font-size: 30px;
      color: #1c1c1c;
    }
  }
  .card:nth-child(1) {
    background: url('@/assets/images/firstPage/bkg1.png');
    background-size: 100% 100%;
  }
  .card:nth-child(2) {
    background: url('@/assets/images/firstPage/bkg2.png');
    background-size: 100% 100%;
  }
  .card:nth-child(3) {
    background: url('@/assets/images/firstPage/bkg3.png');
    background-size: 100% 100%;
  }
  .card:nth-child(4) {
    background: url('@/assets/images/firstPage/bkg4.png');
    background-size: 100% 100%;
    margin-right: 0px;
  }
  .card:nth-child(5) {
    background: url('@/assets/images/firstPage/bkg5.png');
    background-size: 100% 100%;
  }
  .card:nth-child(6) {
    background: url('@/assets/images/firstPage/bkg6.png');
    background-size: 100% 100%;
  }
  .card:nth-child(7) {
    background: url('@/assets/images/firstPage/bkg7.png');
    background-size: 100% 100%;
  }
  .card:nth-child(8) {
    background: url('@/assets/images/firstPage/bkg8.png');
    background-size: 100% 100%;
    margin-right: 0px;
  }
}
</style>
